<template>
  <section>
    <el-card>
      <el-card class="box-card" style="background-color: aliceblue;height: 100%;">
        <div><i class="el-icon-warning is_icon"></i>更新主页，如果系统存在引导页面可以手动修改主页位置文件名，default.html引导页面index.html主页。</div>
        <div class="title-row"><i class="el-icon-warning is_icon"></i>更新栏目列表，推荐使用指定栏目更新。系统提示“更新中...”请不要刷新页面或点击其他菜单。
        </div>
        <div class="title-row"><i class="el-icon-warning is_icon"></i>根据时间与栏目类型生成文章。</div>
      </el-card>
      <el-form
        label-position="left"
        class="demo-form-inline"
        label-width="115px">
        <el-form-item label="选择主页模板">
          <el-select v-model="url" placeholder="请选择" class="input_min_width" style="width: 100%; ">
            <el-scrollbar>
              <div style="height: 300px;">    <el-option
                v-for="item in templateList"
                :key="item"
                :label="item"
                :value="item">
              </el-option>

              </div>

            </el-scrollbar>
          </el-select>
        </el-form-item>
        <el-form-item label="选择主页位置">
          <el-input v-model="position"  class="input_min_width"></el-input>
        </el-form-item>
        <el-form-item style="position: relative">
          <div class="input_min_width">
            <el-button @click="generatedHomePage" :loading="loading"  size="small" type="primary">生成主页</el-button>
            <el-button @click="internetExplorer"   size="small"  type="success">预览主页</el-button>
          </div>
        </el-form-item>
        <el-form-item label="选择要生成栏目">
          <TreeSelect
            class="mr10 it350 tree-sel input_min_width"
            :placeholder="tree.placeholder"
            :accordion="tree.accordion"
            :clearable="tree.clearable"
            :options="columnTree"
            :props="tree.props"
            @getValue="getValue($event)"
          ></TreeSelect>
        </el-form-item>
        <el-form-item>
          <el-button  @click="generate" :loading="columnLoading"   size="small" type="primary">生成栏目</el-button>
        </el-form-item>
        <el-form-item label="文章栏目">
          <TreeSelect
            class="mr10 it350 tree-sel input_min_width"
            :placeholder="tree.placeholder"
            :accordion="tree.accordion"
            :clearable="tree.clearable"
            :options="columnTree"
            :props="tree.props"
            @getValue="getValue($event)"
          ></TreeSelect>
        </el-form-item>
        <el-form-item label="指定时间">
          <div class="block input_min_width">
            <el-date-picker
              v-model="targetTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              placeholder="选择日期" style="width: 100%;">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="seoFree" :loading="detailLoading"   size="small" type="primary">生成文章</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </section>
</template>

<script>
  import {mapGetters} from "vuex";
  import TreeSelect from "@/components/el-tree-select/treeSelect.vue";
  export default {
    name: "static",
    data() {
      return {
        loading: false,
        columnLoading: false,
        detailLoading: false,
        url: 'index.html',
        targetTime: "",
        position: "index",
        columnId: "",
        tree: {
          placeholder: "模糊搜索",
          props: {
            value: "id", // ID字段名
            label: "label", // 显示名称
            children: "children" // 子级字段名
          },
          accordion: true,
          clearable: true
        },
      }
    },
    created() {
      this.getColumnTree()
    },
    computed: {
      ...mapGetters({
        columnTree: "columnTree",
        templateList: "templateList",
      })
    },
    methods: {
      //生成首页
      generatedHomePage() {
        this.loading =true
        let locationName = {
          url: this.url,
          position: this.position
        }
        this.$store.dispatch("generateIndexUsingGETS", {dto:locationName}).then(ret => {
          this.loading =false
          this.success('操作成功')
        });
      },
      //生成栏目
      generate() {
        if (  this.columnId >0){
          this.columnLoading =true
          let param = {
            columnId: this.columnId
          }
          this.$store.dispatch("genernateColumnUsingGETS", param).then(ret => {
            this.columnLoading =false
            this.success('操作成功')
          });
        } else {
          this.warning("请选择一个栏目，建议选择需要更新的栏目，避免长时间等待")
        }

      },
      getValue(data) {
        this.columnId = data
      },
      // 生成文章
      seoFree() {
        if (this.targetTime&&this.columnId>0) {
          this.detailLoading =true
          let d = new Date(this.targetTime).Format('yyyy-MM-dd hh:mm:ss');
          let param = {
            columnId: this.columnId,
            dateTime: d
          }
          this.$store.dispatch("generateArticleUsingGETS", param).then(ret => {
            this.detailLoading =false
            this.success('操作成功')
          });
        }
        else {
          this.warning("请选择一个时间，避免长时间等待")
        }
      },
      //浏览主页
      internetExplorer() {
        let param = {
          position: this.position
        }
        this.$store.dispatch("viewIndexUsingGETS", param).then(ret => {
          window.open(ret.data.value,'_blank')
        });
      },
      //  获取菜单
      getColumnTree() {
        this.$store.dispatch("columnTreeUsingGETS").then(ret => {
        });
        this.$store.dispatch("templateListUsingGETS").then(ret => {
        });
      },
    },
    components: {
      TreeSelect
    }
  }
</script>

<style scoped>
  .input_min_width {
    min-width: 215px;
  }
  .title-row {
    margin-top: 10px;
  }

  .is_icon {
    margin-right: 20px;
  }

  .demo-form-inline {
    width: 28%;
    margin: 20px 0 0 10%
  }

  .tree-sel {
    width: 100%
  }
</style>
